<template>
	<view>
		<view class="goods-list">
		  <view v-for="(goods, index) in goodsList" :key="index" @click="gotoDetail(goods)">
		    <my-goods :goods="goods"></my-goods>
		  </view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        // 商品列表查询参数
				queryObj: {
          query: '', // 查询关键字
          cid: '', // 商品分类 Id
          pagenum: 1, // 页码
          pagesize: 10 // 每页请求的条数
        },
        goodsList: [], // 商品列表数据
        total: 0, // 商品列表数据总条数
        isloading: false // 数据是否正在请求中
			}
		},
    onLoad (options) {
      // 将页面参数转存到 this.queryObj 对象中
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      
      // 需要在获取到参数以后，获取数据
      this.getGoodsList()
    },

    onReachBottom() {
      // 判断数据是否加载完成
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完成')

      // 判断数据是否正在请求中，如果正在请求中，不允许用户发起下一次请求
      if (this.isloading) return

      // 1.上拉加载更多，先开启触底距离
      // 2.上拉加载更多，在事件监听的里面处理逻辑
      // 页码　＋　1
      this.queryObj.pagenum += 1
      // 重新获取数据
      this.getGoodsList()
    },

    onPullDownRefresh() {
       // 1. 重置数据
       this.queryObj.pagenum = 1
       this.total = 0
       this.goodsList = []
       this.isloading = false
       
       // 重新获取数据
       this.getGoodsList(() => {
         uni.stopPullDownRefresh()
       })
    },

    methods: {
      // 跳转到商品详情
      gotoDetail (goods) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id
        })
      },

      // 获取商品列表
      async getGoodsList (callback) {
        // 将isloading设置为true，表示数据正在请求中
        this.isloading = true

       // 调用接口获取数据
        const {data: res} = await uni.$http.get('/goods/search', this.queryObj)
        
        // 将 isloading 设置为 false，表示数据请求已经完成
        this.isloading = false

        // 只要数据请求完毕，就立即按需调用 callback 回调函数
        callback && callback()

        // 判断状态码，提示错误信息
        if (res.meta.status !== 200) return uni.$showMsg()

        // 新旧数据拼接
        this.goodsList = [...this.goodsList, ...res.message.goods]
        this.total = res.message.total
      }
    }
	}
</script>

<style lang="scss">

</style>
